import {Select, Table} from "antd";
import {useUser} from "../../services/user.ts";
import {columns} from "./config.tsx";
import {useState} from "react";
import {Pagination, User} from "../../types/user.ts";
import {useDocumentTitle} from "../../hooks/useDocumentTitle.ts";


const UsersList = () => {

    useDocumentTitle('用户中心', false)
    const [params, setParams] = useState<Pagination | User>({pageNo: 1, pageSize: 20})
    // const [params, setParams] = useUrlQueryParam(['pageNo', 'pageSize']);
    // console.log(queryParams)
    const {data, isLoading} = useUser(params)
    return <div>
        <Select
            placeholder={"请选择"}
            style={{width: 120}}
            onChange={(value) => {
                setParams({
                    ...params,
                    sex: +value
                })
            }}
            options={[{value: '1', label: '男'}, {value: '2', label: '女'}]}
        />
        <Table loading={isLoading} rowKey={"id"} bordered={true} columns={columns} dataSource={data?.data || []}
               pagination={{
                   position: ['bottomRight'],
                   defaultCurrent: 1,
                   total: data?.total,
                   onChange: (page, pageSize) => {
                       setParams({
                           pageNo: page,
                           pageSize
                       })
                   }
               }}/>
    </div>
}

UsersList.whyDidYouRender = true
export default UsersList